
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>table</title>


    <!--<script th:src="@{/popper/popper.js}"></script>-->
    <script th:src="@{/jquery/jquery.js}"></script>
    <script th:src="@{/jquery-plugin/tableExport.js}"></script>


    <script th:src="@{/bootstrap/js/bootstrap.js}"></script>
    <link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet">

    <link th:href="@{/bootstrap-table/bootstrap-table.css}" rel="stylesheet">
    <script th:src="@{/bootstrap-table/bootstrap-table.js}"></script>
    <script th:src="@{/bootstrap-table/bootstrap-table-locale-all.js}"></script>
    <script th:src="@{/bootstrap-table/extensions/toolbar/bootstrap-table-toolbar.js}"></script>
    <script th:src="@{/bootstrap-table/extensions/export/bootstrap-table-export.js}"></script>


    <link th:href="@{/style/index.css}" rel="stylesheet">
    <script th:src="@{/script/index.js}"></script>

    <style>


    </style>



</head>
<body>


<div th:replace="index/layout::navbar"></div>

<div class="container-fluid">
    <div class="row">

        <div th:replace="index/layout::#divbar"></div>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h1 class="page-header">Dashboard</h1>

            <h2 class="sub-header">Section title</h2>
            <div class="table-responsive">
                <div id="toolbar">
                    <button id="remove" class="btn btn-danger" disabled>
                        <i class="fa fa-trash"></i> Delete
                    </button>
                </div>


                <table
                        id="table"
                        data-toolbar="#toolbar"
                        data-search="true"
                        data-show-refresh="true"
                        data-show-toggle="true"
                        data-show-fullscreen="true"
                        data-show-columns="true"
                        data-show-columns-toggle-all="true"
                        data-detail-view="true"
                        data-show-export="true"
                        data-click-to-select="true"
                        data-detail-formatter="detailFormatter"
                        data-minimum-count-columns="2"
                        data-show-pagination-switch="true"
                        data-pagination="true"
                        data-id-field="id"
                        data-page-list="[10, 25, 50, 100, all]"
                        data-show-footer="true"
                        data-side-pagination="server"
                        data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
                        data-response-handler="responseHandler">
                </table>
            </div>
        </div>
    </div>
</div>

</body>

<script>
    var $table = $('#table')
    var $remove = $('#remove')
    var selections = []

    function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
        })
    }

    function responseHandler(res) {
        $.each(res.rows, function (i, row) {
            row.state = $.inArray(row.id, selections) !== -1
        })
        return res
    }

    function detailFormatter(index, row) {
        var html = []
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>')
        })
        return html.join('')
    }

    function operateFormatter(value, row, index) {
        return [
            '<a class="like" href="javascript:void(0)" title="Update">',
            '<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="Remove">',
            '<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>',
            '</a>'
        ].join('')
    }

    window.operateEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like action, row: ' + JSON.stringify(row))
        },
        'click .remove': function (e, value, row, index) {
            $table.bootstrapTable('remove', {
                field: 'id',
                values: [row.id]
            })
        }
    }

    function totalTextFormatter(data) {
        return 'Total'
    }

    function totalNameFormatter(data) {
        return data.length
    }

    function totalPriceFormatter(data) {
        var field = this.field
        return '$' + data.map(function (row) {
            return +row[field].substring(1)
        }).reduce(function (sum, i) {
            return sum + i
        }, 0)
    }

    function initTable() {
        $table.bootstrapTable('destroy').bootstrapTable({
            height: 550,
            locale: 'zh_CN',
            columns: [
                [{
                    field: 'state',
                    checkbox: true,
                    rowspan: 2,
                    align: 'center',
                    valign: 'middle'
                }, {
                    title: 'Item ID',
                    field: 'id',
                    rowspan: 2,
                    align: 'center',
                    valign: 'middle',
                    sortable: true,
                    footerFormatter: totalTextFormatter
                }, {
                    title: 'Item Detail',
                    colspan: 3,
                    align: 'center'
                }],
                [{
                    field: 'name',
                    title: 'Item Name',
                    sortable: true,
                    footerFormatter: totalNameFormatter,
                    align: 'center'
                }, {
                    field: 'price',
                    title: 'Item Price',
                    sortable: true,
                    align: 'center',
                    footerFormatter: totalPriceFormatter
                }, {
                    field: 'operate',
                    title: 'Item Operate',
                    align: 'center',
                    clickToSelect: false,
                    events: window.operateEvents,
                    formatter: operateFormatter
                }]
            ]
        })
        $table.on('check.bs.table uncheck.bs.table ' +
            'check-all.bs.table uncheck-all.bs.table',
            function () {
                $remove.prop('disabled', !$table.bootstrapTable('getSelections').length)

                // save your data, here just save the current page
                selections = getIdSelections()
                // push or splice the selections if you want to save all data selections
            })
        $table.on('all.bs.table', function (e, name, args) {
            console.log(name, args)
        })
        $remove.click(function () {
            var ids = getIdSelections()
            $table.bootstrapTable('remove', {
                field: 'id',
                values: ids
            })
            $remove.prop('disabled', true)
        })
    }

    $(function() {
        initTable()
    })
</script>
</html>